<template>
	<view class="pbTable">
		<!-- 表头 -->
		<!-- <table-head :tableColumns="tableHeadList"></table-head> -->
		<!-- 表内容 -->
		<view>
			<block v-for="(item, index) in dataList" :key="index">
				<!-- 车型 -->
				<view class="table-section flex-colum-center-sb">
					<view class="carModel flex-row-center" @click.stop="changeOpen(item)">
						<text class="modelName">{{ item.modelInfo }}</text>
						<image
							style="width: 32rpx;height: 32rpx;"
							:src="item.isOpen ? '/static/other/arrow_close.png' : '/static/other/arrow_open.png'"
							mode="aspectFill"
						></image>
					</view>
					<view class="inventory" @click.stop="goCarstorage(item)">库存：{{ item.inventory }} 订单所需车辆：{{ item.requiredVehicles }}</view>
				</view>
				<!-- 车辆 -->
				<table-body v-if="item.isOpen" :rosteringVos="item.rosteringVos" :tableHeadList="tableHeadList" @goDetail="goDetail"></table-body>
			</block>
		</view>
	</view>
</template>

<script>
import tableHead from './table-head.vue';
import tableBody from './table-body.vue';
export default {
	name: '',
	components: {
		tableHead,
		tableBody
	},
	data() {
		return {};
	},
	props: {
		tableHeadList: {
			type: Array,
			default() {
				return [];
			}
		},
		tableBodyList: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	computed: {
		dataList() {
			return this.tableBodyList;
		}
	},
	mounted() {},
	methods: {
		changeOpen(item) {
			item.isOpen = !item.isOpen;
			// this.$forceUpdate();
		},
		goCarstorage(carModel) {
			this.$emit('goCarstorage',carModel);
		},
		goDetail(orders){
			this.$emit('goDetail', orders);
		}
	}
};
</script>

<style lang="scss" scoped>
.pbTable {
	position: sticky;
	top: 0;
	left: 0;
	z-index: 9;
	// border-top: 1rpx #f0f0f0 solid;
	border-left: 1rpx #f0f0f0 solid;
}
.table-section {
	position: sticky;
	top: 0;
	left: 0;
	z-index: 8;
	box-sizing: border-box;
	background-color: #fff;
	border-right: 1rpx #f0f0f0 solid;
	border-bottom: 1rpx #f0f0f0 solid;
	width: 100%;
	height: 140rpx;
	padding: 22rpx 10rpx;
	.carModel {
		color: #000;
		font-size: 28rpx;
		.modelName {
			max-width: 95%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	.inventory {
		color: #1673ff;
		font-size: 28rpx;
	}
}
</style>
